<template>
	<view class="container">
		<view class="form">
			<!-- 基础表单校验 -->
			<uni-forms ref="form" :modelValue="form">
				<uni-forms-item name="phone">
					<uni-data-select @change="change" v-model="form.bank_id" :localdata="range"
						placeholder="Card Sub-Category"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="phone">
					<uni-easyinput v-model="form.account_number" placeholder="Account Number" />
				</uni-forms-item>
				<uni-forms-item name="phone">
					<uni-easyinput v-model="form.account_name" placeholder="Account Name" />
				</uni-forms-item>
			</uni-forms>
		</view>
<!-- 		<view class="title">
			<uni-icons type="circle-filled" size="22" color="#64D7DA"></uni-icons> Set As Default
		</view> -->
		<view class="tips">
			<view class="">
				Terms
				<view class=""> 1. Naira account </view>
				<view class=""> 2.Write correct bank name,account name and account number </view>
				<view class=""> 3.Bank account name is the user name of the bank account, not email address or bank name </view>
				4.Bank account name must matching with the account number
			</view>
		</view>
		<view class="submitBtn" @click="submit">
			Save
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					wallet_id: '',
					bank_id: '',
					account_number: '',
					account_name: '',
					// default: '',
				},
				range: [],
				card_id: ''
			}
		},
		onLoad(option) {
			this.form.wallet_id = option.wallet_id
			this.currency_id = option.currency_id
			this.getList()
			if (option.card_id) {
				this.card_id = option.card_id
				uni.setNavigationBarTitle({
					title: 'Edit Bank Account'
				});
				this.getUserCard()
				
			} else {
				uni.setNavigationBarTitle({
					title: 'Add Bank Account'
				});
			}
		
		},
		methods: {
			getList() {
				this.$post("/user/banks", {
					currency_id: this.currency_id
				}).then(res => {
					this.range = []
					res.data.forEach(item => {
						this.range.push({
							value: item.id,
							text: item.bank_name
						})
					})
				})
			},
			getUserCard(){
				this.$post("/user/get_user_card", {
					card_id: this.card_id
				}).then(res => {
					// console.log(res)
					this.form = res.data
					// console.log(this.form)
				})
			},
			submit() {
				if (!this.form.bank_id) {
					this.$toast('Please choose category')
					return
				}
				if (!this.form.account_number) {
					this.$toast('Please input account number')
					return
				}
				if (!this.form.account_name) {
					this.$toast('Please input account name')
					return
				}
				this.$refs.form.validate().then(res => {
					this.$post("/user/add_user_card", this.form).then(res => {
						this.$toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				})
			},
			change(e) {
				this.range.some(item => {
					
				})
			},
			goUrl(url) {
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		padding: 30rpx;

		.submitBtn {
			margin-top: 200rpx;
		}
	}

	.tips {
		color: #999;
		font-size: 20rpx;
		padding: 10rpx 0;

	}

	.title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}
</style>